<template>
  <div>
    <nav-bar title="人员管理">
      <template v-slot:right>
        <span @click="personalStatistical" v-show="user && user.userType === '01'">统计</span>
      </template>
    </nav-bar>
    <div class="maxinBox">
      <van-tabs type="card" v-model="active" @change="updateList">
        <van-tab title="未入场">
          <div class="personalManage backgroundfff" v-if="personalNoEntryList.length">
            <van-row class="personalData" v-for="(item, index) in personalNoEntryList" :key="index">
              <div>姓名：{{item.name}}</div>
              <div>身份证号：{{item.idCardNo}}</div>
              <div>报备时间：{{item.createTime | formatDate('YYYY-MM-DD')}}</div>
            </van-row>
          </div>
          <div class="marginTop5 backgroundfff">
            <div style="width: 80%;margin: 0 auto;padding: 0.3125rem 0;position: fixed;bottom: 0;left: 10%;">
              <van-button round block type="info" @click="onAddReported">
                添加报备
              </van-button>
            </div>
          </div>
        </van-tab>
        <van-tab title="在职人员">
          <van-dropdown-menu>
            <van-dropdown-item v-model="form.unitId" :options="unitList" @change="getPersonalServiceList" />
            <van-dropdown-item v-model="form.team" :options="teamList"  @change="getPersonalServiceList" />
            <van-dropdown-item v-model="form.workType" :options="workTypeList"  @change="getPersonalServiceList" />
          </van-dropdown-menu>
          <div class="tableData center">
            <van-row class="tableTitle">
              <van-col :span="6">姓名</van-col>
              <van-col :span="6">班组</van-col>
              <van-col :span="6">工种</van-col>
              <van-col :span="6">进场时间</van-col>
            </van-row>
            <van-row class="tableContent backgroundfff" v-for="(item, index) in personalServiceList" :key="index">
              <van-col :span="6">{{item.name}}</van-col>
              <van-col :span="6">{{item.teamName}}</van-col>
              <van-col :span="6">{{item.workTypeName}}</van-col>
              <van-col :span="6">{{item.enterTime | formatDate('YYYY-MM-DD')}}</van-col>
            </van-row>
          </div>
        </van-tab>
        <van-tab title="退场人员">
          <van-dropdown-menu>
            <van-dropdown-item v-model="formExit.unitId" :options="unitList" @change="getPersonalExitList" />
            <van-dropdown-item v-model="formExit.team" :options="teamList" @change="getPersonalExitList" />
            <van-dropdown-item v-model="formExit.workType" :options="workTypeList" @change="getPersonalExitList" />
          </van-dropdown-menu>
          <div class="tableData center">
            <van-row class="tableTitle">
              <van-col :span="5">姓名</van-col>
              <van-col :span="4">班组</van-col>
              <van-col :span="4">工种</van-col>
              <van-col :span="6">进场时间</van-col>
              <van-col :span="5">退场原因</van-col>
            </van-row>
            <van-row class="tableContent backgroundfff" v-for="(item, index) in personalExitList" :key="index">
              <van-col :span="5">{{item.name}}</van-col>
              <van-col :span="4">{{item.teamName}}</van-col>
              <van-col :span="4">{{item.workTypeName}}</van-col>
              <van-col :span="6">{{item.enterTime | formatDate('YYYY-MM-DD')}}</van-col>
              <van-col :span="5">{{item.bowOutType | exitReason}}</van-col>
            </van-row>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import dashbordAPI from '../../../api/dashbordAPI.js'
  import personalManageAPI from '../../../api/workAPI/personalManageAPI.js'
  export default {
    data() {
      return {
        projectId: localStorage.getItem('projectId'),
        form: {
          unitId: 0,
          team: 0,
          workType: 0,
        },
        formExit: {
          unitId: 0,
          team: 0,
          workType: 0,
        },
        user: {
          userStatus: '',
          userType: '',
        },
        active: 0,
        unitList: [],
        teamList: [],
        workTypeList: [],
        personalExitList: [],
        personalServiceList: [],
        personalNoEntryList: []
      }
    },
    methods: {
      updateList() {
        if (this.active === 1) {
          this.getPersonalServiceList()
        } else if (this.active === 2) {
          this.getPersonalExitList()
        } else {
          this.getPersonalNoEntryList()
        }
      },
      // 查询未入场列表
      getPersonalNoEntryList() {
        let data = {
          pageNum: 1,
          pageSize: 500,
        }
        personalManageAPI.getPersonalNoEntryList(this.projectId, data).then(res => {
          this.personalNoEntryList = res.list
        })
      },
      // 查询在职人员列表
      getPersonalServiceList() {
        let team
        let workType
        let unitId
        if (this.form.team === 0) {
          team = ''
        } else {
          team = this.form.team
        }
        if (this.form.workType === 0) {
          workType = ''
        } else {
          workType = this.form.workType
        }
        if (this.form.unitId === 0) {
          unitId = ''
        } else {
          unitId = this.form.unitId
        }
        let form = {
          team: team,
          unitId: unitId,
          workType: workType,
          passExam: 1,
          pageNum: 1,
          pageSize: 500,
        }
        personalManageAPI.getPersonalList(this.projectId, form).then(res => {
          this.personalServiceList = res
        })
      },
      // 退场人员列表
      getPersonalExitList() {
        let team
        let workType
        let unitId
        if (this.formExit.team === 0) {
          team = ''
        } else {
          team = this.formExit.team
        }
        if (this.formExit.workType === 0) {
          workType = ''
        } else {
          workType = this.formExit.workType
        }
        if (this.formExit.unitId === 0) {
          unitId = ''
        } else {
          unitId = this.formExit.unitId
        }
        let formExit = {
          team: team,
          unitId: unitId,
          workType: workType,
          pageNum: 1,
          pageSize: 500,
        }
        personalManageAPI.getPersonalExitList(this.projectId, formExit).then(res => {
          this.personalExitList = res
        })
      },
      // 查询参建单位
       getUnit() {
		 let projectId = localStorage.getItem('projectId')
         dashbordAPI.getUnit(projectId).then(res => {
           this.unitList = res.data.map(item => {
             return {
               text: item.dictLabel,
               value: item.dictCode
             }
           })
           this.unitList.unshift({
              text: '分包单位',
              value: 0
           })
         })
       },
       // 班组查询
       getClassGroup() {
         dashbordAPI.getClassGroup().then(res => {
           this.teamList = res.data.map(item => {
             return {
               text: item.dictLabel,
               value: item.dictCode
             }
           })
           this.teamList.unshift({
              text: '班组',
              value: 0
           })
         })
       },
      // 工种查询
      getWorkType() {
        dashbordAPI.getWorkType().then(res => {
          this.workTypeList = res.data.map(item => {
            return {
              text: item.dictLabel,
              value: item.dictCode,
            }
          })
          this.workTypeList.unshift({
             text: '工种',
             value: 0
          })
        })
      },
      // 跳转新增报备
      onAddReported() {
        this.$router.push({
          name: 'AddReported'
        })
      },
      // 人员统计
      personalStatistical() {
        this.$router.push({
          name: 'PersonalStatistical'
        })
      }
    },
    mounted() {
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      this.getUnit()
      this.getClassGroup()
      this.getWorkType()
      this.getPersonalNoEntryList()
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .van-tabs__wrap{
    // height: 2.75rem;
    // line-height: 2.75rem;
    .van-tabs__nav--card{
      border: inherit;
      margin: inherit;
      // height: 2.75rem;
      .van-tab.van-tab--active{
        background-color: #fff;
        color: #1577FF;
      }
      .van-tab{
        border: inherit;
        // height: 2.75rem;
        // line-height: 2.75rem;
        color: #999;
        background-color: #EBEBEB;;
      }
    }
  }
  .personalManage{
    .personalData{
      padding: 0.9375rem;
      font-size: 0.875rem;
      border-bottom: 0.0625rem solid #E5E5E5;
      div{
        padding: 0.125rem 0;
      }
      div:nth-child(1) {
        font-size: 1rem;
        color: #333;
      }
      div:nth-child(2),div:nth-child(3) {
        font-size: 0.875rem;
        color: #666;
      }
    }
  }
  .tableData{
    font-size: 0.875rem;
    .tableContent:nth-child(2n){
      padding: 0.625rem 0.9375rem;
      color: #666;
    }
    .tableContent:nth-child(2n + 1){
      padding: 0.625rem 0.9375rem;
      color: #666;
      background-color: #F6FAFF;
    }
    .tableTitle{
      padding: 0.625rem 0.9375rem;
      background-color: #F6F6F6;
      height: 1.25rem;
      color: #999;
    }
  }
</style>
